import React from 'react'
import { Button, Input } from 'antd'
const Search = Input.Search;
import SlideFrame from 'components/slide-frame'

export default {
  key: 'slide-frame',  //唯一key值
  name: 'SlideFrame 滑动框',  //名称
  author: '张然',  //作者
  description: '从右边滑动进入的滑动框，一般用于数据的页面内新增、编辑操作。',  //描述
  isExampleFull: false,  //例子是否需要全屏幕展示，默认为两列瀑布流
  api: [{  //下方API表格配置
    title: 'API',  //API标题
    data: [{  //下方API表格数据
      param: 'width', description: '宽度', type: 'string|number', defaultValue: '50vw'
    },{
      param: 'title', description: '标题', type: 'string', defaultValue: '-'
    },{
      param: 'show', description: '必填，SlideFrame 是否可见', type: 'boolean', defaultValue: '-'
    },{
      param: 'hasMask', description: '是否展示遮罩', type: 'boolean', defaultValue: 'true'
    },{
      param: 'onClose', description: '点击遮罩层或右上角叉按钮的回调', type: 'function', defaultValue: '-'
    },{
      param: 'content', description: '必填，SlideFrame 内部显示的组件类', type: 'class (React.Component)', defaultValue: '-'
    },{
      param: 'afterClose', description: 'SlideFrame 完全关闭后的回调', type: 'function(result)', defaultValue: '-'
    },{
      param: 'params', description: 'SlideFrame 内部需要的参数，内部可通过::this.props.params::拿到', type: 'object', defaultValue: '-'
    },{
      param: 'hasFooter', description: '是否有底部操作区，如果为true则底部会预留::60px::高度的操作区', type: 'boolean', defaultValue: 'true'
    }],
    description: '被包裹的内容组件内会自带::this.props.close(result)::方法，用于内部关闭对话框及对外传值。',  //API表格上方的说明
  }],
  example: [  //例子
    {
      title: '基础用法',  //例子标题
      description: '点击按钮后展开',  //例子描述
      state: {  //例子需要的state值，该对象将会加到例子内部的this.state
        show: false
      },
      getMethod: context => {  //例子所需要的方法，context对应组件内的this
        return {
          handleOpen: () => {
            context.setState({ show: true })
          },
          handleClose: () => {
            context.setState({ show: false })
          }
        }
      },
      getContent: context => {  //例子本体，context对应组件内的this
        class SlideFrameContent extends React.Component {
          render() {
            return (
              <div>content</div>
            )
          }
        }
        const { show } = context.state;
        return (
          <div>
            <Button onClick={context.handleOpen} type="primary">Open</Button>
            <SlideFrame title="滑动框"
                        content={SlideFrameContent}
                        show={show}
                        onClose={context.handleClose}/>
          </div>
        )
      }
    },
    {
      title: '传值与内部关闭',
      description: '外部值通过::params::传入，内部值通过::this.props.close::传出，在外部使用::afterClose::方法接收。',
      state: {
        show: false,
        outerValue: '',
        innerValue: ''
      },
      getMethod: context => {
        return {
          afterClose: result => {
            if(result){
              context.setState({ show: false, innerValue: result.innerValue })
            } else {
              context.setState({ show: false })
            }
          },
          handleClose: () => {
            context.setState({ show: false })
          }
        }
      },
      getContent: context => {
        class SlideFrameContent extends React.Component {
          handleClose = value => {
            this.props.close({ innerValue: value })
          };
          render() {
            return (
              <div>
                <div style={{ marginBottom: 10 }}>外部输入的值是 {this.props.params.outerValue}</div>
                <Search enterButton="Close"
                        onSearch={this.handleClose}/>
              </div>
            )
          }
        }
        const { show, outerValue, innerValue } = context.state;
        return (
          <div>
            <div style={{ marginBottom: 10 }}>内部输入的值是{innerValue}</div>
            <Search enterButton="Open"
                    onSearch={value => context.setState({ show: true, outerValue: value })}/>
            <SlideFrame title="滑动框"
                        content={SlideFrameContent}
                        show={show}
                        onClose={context.handleClose}
                        params={{ outerValue }}
                        afterClose={context.afterClose}/>
          </div>
        )
      }
    },
    {
      title: '自定义宽度',
      description: '通过设定::width::参数设置宽度',
      state: {
        show: false,
        width: 100
      },
      getMethod: context => {
        return {
          handleOpen: width => {
            context.setState({ show: true, width })
          },
          handleClose: () => {
            context.setState({ show: false })
          }
        }
      },
      getContent: context => {
        class SlideFrameContent extends React.Component {
          render() {
            return (
              <div>content</div>
            )
          }
        }
        const { show, width } = context.state;
        return (
          <div>
            <Button onClick={e => context.handleOpen(100)} style={{ marginRight: 10 }}>100px</Button>
            <Button onClick={e => context.handleOpen(300)} style={{ marginRight: 10 }}>300px</Button>
            <Button onClick={e => context.handleOpen('80%')} style={{ marginRight: 10 }}>80%</Button>
            <SlideFrame title="滑动框"
                        width={width}
                        content={SlideFrameContent}
                        show={show}
                        onClose={context.handleClose}/>
          </div>
        )
      }
    }
  ]
}
